<div
  class="fui-message-notice"
  [@enterLeave]="message.state"
  (mouseenter)="onEnter()"
  (mouseleave)="onLeave()"
>
  <div class="fui-message-notice-content">
    <div *ngIf="!message.html" class="fui-message-custom-content" [ngClass]="'fui-message-' + message.type">
      <ng-container [ngSwitch]="message.type">
        <svg *ngSwitchCase="'success'" fuiIcon="check-circle" color="success" size="sm"></svg>
        <svg *ngSwitchCase="'info'" fuiIcon="info-circle" color="primary" size="sm"></svg>
        <svg *ngSwitchCase="'warning'" fuiIcon="exclamation-circle" color="warning" size="sm"></svg>
        <svg *ngSwitchCase="'error'" fuiIcon="cross-circle" color="danger" size="sm"></svg>
        <svg *ngSwitchCase="'loading'" fuiIcon="loading" color="secondary" size="sm" class="fui-rotate"></svg>
      </ng-container>
      <span>{{message.content}}</span>
    </div>
    <div *ngIf="message.html" [innerHTML]="message.html"></div>
  </div>
</div>
